<template>
  <el-drawer
    title="会员卡转账"
    :visible.sync="isShow"
    :before-close="closeDrawer"
    size="50%"
  >
    <!-- <div class="app-main-title">
      会员卡转账
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div> -->
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="120px"
        label-suffix="："
      >
        <el-form-item label="转出会员卡" prop="outCardNo">
          <div style="width: 520px">
            <MemberSearch
              placeholder="会员昵称/手机号/卡号"
              @clear="outCardClear"
              @select="outCardSelect"
            />
            <div v-if="outCardInfo && outCardInfo.number" class="member_info">
              <div class="item">姓名：{{ outCardInfo.nickName }}</div>
              <div class="item">手机号：{{ outCardInfo.phone }}</div>
              <!-- <div class="item">会员等级：{{ memberInfo.cardName }}</div> -->
              <div class="item">
                充值余额：<span>{{ outCardInfo.rechargeMoney || 0 }}</span>
              </div>
              <div class="item">
                赠送余额：<span>{{ outCardInfo.giveMoney || 0 }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="outCardInfo.number && isRequired === '1'"
          label="会员卡密码"
          prop="payPw"
        >
          <el-input
            v-model="param.payPw"
            placeholder="请输入会员卡密码"
            type="password"
            class="input-with-select w400"
            auto-complete="new-password"
            maxlength="6"
            clearable
            oninput="value=value.replace(/[^\d]/g,'')"
          />
        </el-form-item>
        <el-form-item label="转入会员卡" prop="inCardNo">
          <div style="width: 520px">
            <MemberSearch
              placeholder="会员昵称/手机号/卡号"
              @clear="inCardClear"
              @select="inCardSelect"
            />
            <div v-if="inCardInfo && inCardInfo.number" class="member_info">
              <div class="item">姓名：{{ inCardInfo.nickName }}</div>
              <div class="item">手机号：{{ inCardInfo.phone }}</div>
              <!-- <div class="item">会员等级：{{ memberInfo.cardName }}</div> -->
              <div class="item">
                充值余额：<span>{{ inCardInfo.rechargeMoney || 0 }}</span>
              </div>
              <div class="item">
                赠送余额：<span>{{ inCardInfo.giveMoney || 0 }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="转账金额" prop="money">
          <el-input
            v-model="param.money"
            class="code-style w200"
            type="text"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            placeholder="请输入转账金额"
          />
          <span class="ml10 placeholder6">元</span>
          <span class="ml10 placeholder6">转账金额为会员卡充值余额</span>
        </el-form-item>
        <el-form-item label="转账说明">
          <el-input
            v-model="param.remarks"
            class="code-style w400"
            type="textarea"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            @click="onSubmit()"
            >确认转账</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { transfer, isMemberCardPwd } from '@/api'
import MemberSearch from '@/components/MemberSearch'
export default {
  name: 'VipTransfer',
  components: {
    MemberSearch
  },
  data() {
    return {
      isShow: false,
      subLoading: false,
      outNum: '',
      showOut: false,
      outMessage: {},
      outCardInfo: {},
      isRequired: '0',
      inCardInfo: {},
      inNum: '',
      cardPwd: '',
      showIn: false,
      inMessag: {
        number: ''
      },
      param: {},
      // 表单校验
      rules: {
        outCardNo: [
          { required: true, message: '请输入转出卡号/手机号并搜索会员' }
        ],
        payPw: [
          { required: true, message: '请输入会员卡密码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入6位会员卡密码', trigger: 'blur' }
        ],
        inCardNo: [
          { required: true, message: '请输入转入卡号/手机号并搜索会员', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入转账金额', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入转账说明', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    isMemberCardPwd({ param: {} })
      .then((res) => {
        if (res.errorCode !== '000000') return
        this.isRequired = res.record.isRequired || '0'
      })
      .catch(() => { })
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    outCardSelect(item) {
      this.outCardInfo = item
      this.$set(this.param, 'outCardNo', item.number)
      this.$set(this.param, 'outId', item.id)
      this.$refs.form.clearValidate()
    },
    outCardClear() {
      this.outCardInfo = {}
    },
    inCardSelect(item) {
      this.inCardInfo = item
      this.$set(this.param, 'inCardNo', item.number)
      this.$set(this.param, 'inId', item.id)
      this.$refs.form.clearValidate()
    },
    inCardClear() {
      this.inCardInfo = {}
    },
    onSubmit() {
      const param = { ...this.param }
      param.venueId = sessionStorage.getItem('venueId')
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.subLoading = true
          transfer({ param })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode !== '000000') return
              this.$message.success('转账成功')
              this.$emit('success')
              this.closeDrawer()
            })
            .catch((err) => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.member_info {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item {
    width: 33.33%;
    line-height: 28px;
    height: 28px;
  }
}
.card-message {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
</style>
